<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      :title="title"
      title-color="#000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="menus">
      <view class="services">
        <view class="article" v-for="a in services">
          <image
            class="img"
            :src="a.img"
            mode="aspectFit|aspectFill|widthFix"
            lazy-load="false"
            binderror=""
            bindload=""
            @click="articleDetail(a)"
          >
          </image>
          <view class="calc">
            <view class="title" @click="articleDetail(a)">服务名称：{{ a.name }}</view>
            <view class="title link" @click="articleDetail(a)">价格（元）：{{ a.price }}</view>
          </view>
          <u-icon @click="addCart(a)" class="icon" name="plus-circle-fill"></u-icon>
        </view>

        <u-empty
          v-if="services.length == 0"
          text="没有找到相关信息~"
          mode="list"
        ></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
import { getGoods, addCart, getCarts } from "../../api/system/api";
export default {
  data() {
    return {
      key: "",
      imgUrl: "http://127.0.0.1:3000/",
      userInfo: {},
      currentTab: "",
      services: [],
      totalArticle: {},
      title: "",
      typeList: [],
      allCarts: [],
    };
  },
  methods: {
    getData() {
      getGoods().then((res) => {
        this.services = res.data.list.filter((v) => v.category == this.title);
        console.log(this.services);
      });
    },
    articleDetail(article) {
      this.$u.route("/pages/good/articleDetail", {
        article: article.id,
      });
    },
    addCart(good) {
      if (!this.userInfo.id) {
        this.$refs.uToast.show({
          title: "请先登录~",
          type: "error",
        });
      } else {
        if (this.allCarts.includes(good.id)) {
          this.$refs.uToast.show({
            title: "此商品已在购物车中~",
            type: "error",
          });
          return
        }
        addCart({
          userId: this.userInfo.id,
          goodsId: good.id,
          num: 1
        }).then(res => {
          this.allCarts.push(good.id)
          this.$refs.uToast.show({
            title: "您已成功加入购物车~",
            type: "success",
          });
        })
      }
    }
  },
  created() {
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = res.data;
        getCarts().then(res => {
          console.log(res)
          this.allCarts = res.data.filter(v => v.userId == this.userInfo.id).map(v => v.goodsId)
        })
      },
      error: (res) => {},
    });
  },
  onLoad(option) {
    this.title = option.type;
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;

  .content {
    padding: 20rpx;
  }
}
.header {
  width: 100%;
  height: 500rpx;
  .img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.menus {
  width: 100%;
  padding: 6rpx 10rpx;
  .article {
    width: 96%;
    margin: 20rpx 2%;
    background: #fff;
    padding: 8rpx 12rpx;
    border-radius: 6rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10rpx;
    position: relative;

    .icon {
      position: absolute;
      right: 20rpx;
      top: 60rpx;
      color: red;
      z-index: 99;
    }

    .img {
      width: 120rpx;
      height: 120rpx;
    }

    .calc {
      width: calc(100% - 140rpx);
    }
    .title {
      font-weight: bold;
      font-size: 24rpx;
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .time {
      font-size: 20rpx;
      color: #999;
    }
  }
}

.link {
  font-size: 20rpx;
  color: #fa3534;
}
</style>
